<template>
  <div class="clientUnpaidQuery">
    <div class="left">
      <div class="clientUnpaidQuery_top">
        <p style="margin: 2px 6px 0 0">客户</p>
        <input
          class="inp inp3"
          type="text"
          v-model="customerNo"
          @blur="customerNoBlur"
          :disabled="jxAgent"
        />
        <div class="sty">
          <el-select
            v-model="customerName"
            @change="
              (e) => {
                this.customerNo = e
              }
            "
            :disabled="jxAgent"
          >
            <el-option
              v-for="item in customerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right">{{ item.label }}</span>
            </el-option>
          </el-select>
        </div>
        <p>款号</p>
        <div class="sty2">
          <el-select
            v-model="styleNumber"
            multiple
            collapse-tags
            style="width: 170px"
          >
            <el-option
              style="width: 170px"
              v-for="item in styleNumberList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <p>品牌</p>
        <div class="sty2">
          <el-select v-model="brandedName">
            <el-option
              v-for="item in brandList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <p class="jl">配货方式</p>
        <div class="sty2">
          <el-select v-model="cooperateWay">
            <el-option
              v-for="item in cooperateWayList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <p class="jl">组头合计</p>
        <el-input style="width: 3vw" disabled v-model="total"></el-input>
        <el-checkbox v-model="checked" border>客订而厂订未出款</el-checkbox>
      </div>
      <div class="button_box">
        <el-button @click="search" type="primary" icon="el-icon-search"
          >查询</el-button
        >
        <el-button @click="exportExcel" icon="el-icon-upload2">导出</el-button>
        <el-select v-model="showType" @change="typeChange" style="float: right">
          <el-option
            v-for="item in showTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <p style="float: right">显示方式</p>
      </div>
      <el-table
        id="outTable"
        :data="tableData"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '36px' }"
        height="75.5vh"
        style="width: 100%"
        highlight-current-row
        @row-click="rowClick"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="customerNo"
          label="客户编号"
          width="180"
        ></el-table-column>
        <el-table-column prop="customerName" label="客户简称"></el-table-column>
        <el-table-column
          :prop="showType ? 'styleNumber' : 'kindsNumber'"
          :label="showType ? '款号' : '货号'"
        ></el-table-column>
        <el-table-column prop="repertory" label="仓库库存"></el-table-column>
        <el-table-column prop="brandedName" label="品牌"></el-table-column>
      </el-table>
      <foot-view
        class="footView"
        :pagesNum="pagesNum"
        :hasPagination="true"
        :pageSize="limit"
        :tableTypeChange="tableTypeChange"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <div slot="text">
          <span>数据库：{{ jxQuarter }}</span>
          <span>记录数：{{ amount }}</span>
        </div>
      </foot-view>
    </div>

    <div class="_img">
      <img style="width: 100%" :src="imgSrc" />
    </div>
  </div>
</template>

<script>
import footView from '../../../components/FootView'

import { getClient } from '../../../network/client'
import { getBranded } from '../../../network/branded'
import { getNumber } from '../../../network/quarter'
import { getCustomerOrderNotFactoryOrder } from '../../../network/customerQuery'

import table2excel from 'js-table2excel'

import enterUp from '../../../components/mixins/enterUp'

export default {
  name: 'client_unpaid_query',
  mixins: [enterUp],
  data() {
    return {
      inpList: [],
      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      tableTypeChange: false,

      customerNo: '',
      customerName: '',
      customerList: [],
      styleNumber: [],
      styleNumberList: [],
      brandedName: '',
      brandList: [],
      cooperateWay: '全部',
      cooperateWayList: [
        { value: '全部', label: '全部' },
        { value: '配货', label: '配货' },
        { value: '订货', label: '订货' },
        { value: '订断', label: '订断' },
        { value: '追断', label: '追断' }
      ],
      total: 0,
      checked: false,
      showType: 1,
      showTypeList: [
        { value: 1, label: '以款号方式' },
        { value: 0, label: '以货号方式' }
      ],
      amount: 0,

      imgSrc: '',

      tableData: [],
      kindsNumberList: [],
      styleNumberData: [],
      jxQuarter: null,
      jxAgent:null,
      operator:null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))[1],
      // jxAgent:
      //   document.cookie.match(RegExp('jxAgent' + '=([^;]+)'))[1] == 1
      //     ? true
      //     : false,
      // operator: document.cookie.match(RegExp('jxUser' + '=([^;]+)'))[1]
    }
  },
  components: {
    footView
  },
  watch: {
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    customerNo(a, b) {
      this.customerNo = a.toUpperCase().trim()
    }
  },
  methods: {
    search() {
      this.total = 0
      this.kindsNumberList = []
      this.styleNumberData = []
      this.tableData = []
      this.amount = 0
      if (!this.checked && !this.customerNo) {
        this.$message.error('客户不能为空')
        return
      }

      let sn = ''
      this.styleNumber.forEach((e) => {
        if (sn == '') {
          sn = `'${e}'`
        } else {
          sn = `${sn},'${e}'`
        }
      })

      let cn = ''
      for (const i of this.customerList) {
        if (this.customerNo == i.value) {
          cn = i.label
          break
        }
      }

      let d = {
        brandedName: this.brandedName,
        cooperateWay: this.cooperateWay == '全部' ? '' : this.cooperateWay,
        customerName: cn,
        customerNo: this.customerNo,
        // 是否选择客订而厂订未出款 0:否 1：是
        isCustomerOrderNotFactoryOrder: this.checked ? 1 : 0,
        styleNumber: sn
      }
      // console.log(d)
      // return
      getCustomerOrderNotFactoryOrder(JSON.stringify(d)).then((res) => {
        // console.log(res)
        // console.log(JSON.parse(JSON.stringify(res.data.data.styleNumber)))
        this.currentPage = 1
        this.tableTypeChange = !this.tableTypeChange
        if (res.data.code == 200) {
          this.total = res.data.data.size
          this.kindsNumberList = res.data.data.kindsNumber
          this.styleNumberData = res.data.data.styleNumber
          this.amount = this.kindsNumberList.length
          // this.conversionTable()
          this.typeChange()
        }
        // 原来写的，但是有bug（直接注释没有提示给用户）
        // if (JSON.parse(JSON.stringify(res.data.data.styleNumber)) == '') {
        //   this.$message('此条件查询暂无数据')
        // }
        // fei新增 下面两个判断，用来解决查询出现的问题(提示用户)
        if (this.showType === 1) {
          if (JSON.parse(JSON.stringify(res.data.data.styleNumber)) == '') {
            this.$message('此条件查询暂无数据')
          }
        }
        //
        if (this.showType === 0) {
          if (JSON.parse(JSON.stringify(res.data.data.kindsNumber)) == '') {
            this.$message('此条件查询暂无数据')
          }
        }
      })
    },
    // 导出
    exportExcel() {
      let column = []
      if (this.showType) {
        column = [
          { key: 'customerNo', title: '客户编号', type: 'text' },
          { key: 'customerName', title: '客户简称', type: 'text' },
          { key: 'styleNumber', title: '款号', type: 'text' },
          { key: 'repertory', title: '仓库库存', type: 'text' },
          { key: 'brandedName', title: '品牌', type: 'text' }
        ]
        table2excel(column, this.styleNumberData, '客户未出款.xls')
      } else {
        column = [
          { key: 'customerNo', title: '客户编号', type: 'text' },
          { key: 'customerName', title: '客户简称', type: 'text' },
          { key: 'kindsNumber', title: '货号', type: 'text' },
          { key: 'repertory', title: '仓库库存', type: 'text' },
          { key: 'brandedName', title: '品牌', type: 'text' }
        ]
        table2excel(column, this.kindsNumberList, '客户未出款.xls')
      }
    },

    rowClick(row) {
      // console.log(row)
      this.imgSrc = row.image || require('../../../assets/img/no-data.png')
    },
    // 客户编号失去焦点
    customerNoBlur() {
      if (this.customerNo != '') {
        for (const i of this.customerList) {
          if (this.customerNo == i.value) {
            this.customerName = i.label
            return
          }
        }
        this.$alert('无此客户编号', '', {
          confirmButtonText: '确定'
        })
        this.customerNo = ''
        this.customerName = ''
      } else {
        this.customerName = ''
      }
    },
    // 仓库编号失去焦点
    warehouseNoBlur() {
      if (this.warehouseNo != '') {
        for (const i of this.warehouseList) {
          if (this.warehouseNo == i.value) {
            this.warehouseName = i.label
            return
          }
        }
        this.$alert('无此仓库编号', '', {
          confirmButtonText: '确定'
        })
        this.warehouseNo = ''
        this.warehouseName = ''
      } else {
        this.warehouseName = ''
      }
    },

    // 每页显示页数改变
    handleSizeChange(val) {
      this.limit = val
      if (this.showType) {
        this.tableData = this.styleNumberData.slice(
          (this.currentPage - 1) * this.limit,
          this.currentPage * this.limit
        )
      } else {
        this.tableData = this.kindsNumberList.slice(
          (this.currentPage - 1) * this.limit,
          this.currentPage * this.limit
        )
      }
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      if (this.showType) {
        this.tableData = this.styleNumberData.slice(
          (this.currentPage - 1) * this.limit,
          this.currentPage * this.limit
        )
      } else {
        this.tableData = this.kindsNumberList.slice(
          (this.currentPage - 1) * this.limit,
          this.currentPage * this.limit
        )
      }
    },

    typeChange() {
      if (this.showType) {
        this.dataLen = this.styleNumberData.length
        this.tableData = this.styleNumberData.slice(
          (this.currentPage - 1) * this.limit,
          this.currentPage * this.limit
        )
      } else {
        this.dataLen = this.kindsNumberList.length
        this.tableData = this.kindsNumberList.slice(
          (this.currentPage - 1) * this.limit,
          this.currentPage * this.limit
        )
      }
    },

    conversionTable() {
      this.styleNumberData = []
      this.kindsNumberList.forEach((e) => {
        let exist = 0
        if (!this.styleNumberData.length) {
          this.styleNumberData.push(e)
        } else {
          for (const i of this.styleNumberData) {
            if (i.styleNumber == e.styleNumber) {
              i.repertory = Number(i.repertory) + Number(e.repertory)
              exist = 1
              break
            }
          }
          if (!exist) {
            this.styleNumberData.push(e)
          }
        }
      })
    }
  },
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    let jxAgentVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    let operatorVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    this.operator = operatorVal ? operatorVal[1] : null
   if(jxAgentVal){
    this.jxAgent = jxAgentVal[1] == 1 ? true : false
   }
   
    this.inpList = this.getInput()
    // 获取所有客户信息
    this.customerList = []
    getClient({ limit: 99999 }).then((res) => {
      // console.log(res)
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach((e) => {
          if (e.stop != 1) {
            this.customerList.push({ value: e.no, label: e.name })
          }
        })
        if (this.jxAgent) {
          for (const i of this.customerList) {
            if (i.label == this.operator) {
              this.customerNo = i.value
              this.customerName = i.value
              break
            }
          }
        }
      }
    })
    // 获取品牌
    getBranded({ limit: 99999 }).then((res) => {
      // console.log(res)
      if (res.data.code != 200) return
      res.data.data.forEach((e) => {
        this.brandList.push({ value: e.name, label: e.name })
      })
    })
    // 获取款号
    getNumber(['']).then((res) => {
      console.log(res)
      if (res.data.code != 200) return
      res.data.data.forEach((e) => {
        this.styleNumberList.push({
          value: e.styleNumber,
          label: e.styleNumber
        })
      })
    })
  }
}
</script>

<style scoped>
.clientUnpaidQuery {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.clientUnpaidQuery .left {
  position: absolute;
  width: 69.5%;
  display: inline-block;
  height: 100%;
  border-right: 15px solid #f4f4f4;
  padding-right: 15px;
}
.clientUnpaidQuery ._img {
  width: 28.8%;
  margin-left: 71.5%;
  padding-top: 10px;
  background: white;
}
.clientUnpaidQuery_top {
  display: flex;
  border-bottom: 2px solid #f4f4f4;
  padding: 1.5vh 0;
  white-space: nowrap;
}
.clientUnpaidQuery input:focus {
  outline: none;
  border: 1px solid #017aff;
}
.inp {
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  height: 30px;
  padding: 0 15px;
}
.inp3 {
  width: 3vw;
  margin-right: 0.5vw;
}
.jl {
  margin: 2px 6px 0 10px;
  display: inline-block;
}
.clientUnpaidQuery_top p:not(:first-child) {
  margin: 2px 6px 0 10px;
  display: inline-block;
}
.clientUnpaidQuery .button_box {
  margin: 1.5vh 0;
  white-space: nowrap;
}
.clientUnpaidQuery .button_box p {
  display: inline-block;
  margin-right: 0.5vw;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
</style>

<style>
.clientUnpaidQuery .el-input__icon {
  line-height: 30px;
}
.clientUnpaidQuery .el-input__inner {
  height: 30px;
}
.clientUnpaidQuery .clientUnpaidQuery_top .sty .el-input__inner {
  height: 30px;
  width: 4.5vw;
}
.clientUnpaidQuery .clientUnpaidQuery_top .sty2 .el-input__inner,
.clientUnpaidQuery .button_box .el-input__inner {
  height: 30px;
  width: 8.4vw;
}

.clientUnpaidQuery .clientUnpaidQuery_top .block .el-input__icon {
  /* line-height: 23px; */
  height: 66%;
}

.clientUnpaidQuery .button_box .el-checkbox.is-bordered {
  padding: 4px 5px 9px 5px;
  height: 30px;
}
.clientUnpaidQuery .clientUnpaidQuery_top .el-checkbox.is-bordered {
  padding: 4px 5px 9px 5px;
  height: 30px;
  margin-left: 10px;
}
.clientUnpaidQuery .el-select__tags .el-tag {
  max-width: 60%;
}
.clientUnpaidQuery .el-select .el-tag__close.el-icon-close {
  right: 0;
}
</style>
